<template>
	<view class="page home-page">
      <cu-navbar :is-back="false">
          <block slot="content">首页</block>
      </cu-navbar>
		<div class="title-box f-r a-c j-b">
			<div class="f-g f-r a-c">
				<div class="title-pre"></div>
				<div>杜康简介</div>
			</div>
			<div class="more" @click="routeJump('/pages/qiye-detail/qiye-detail')"> 更多> </div>
		</div>
		<div class="video-box">
			<video style="width: 100%;" id="myVideo" src="https://binzongshangcheng.wenkangkeji.com/spbf.mp4"
			                    enable-danmu danmu-btn controls></video>
		</div>
		<div class="title-box f-r a-c j-b">
			<div class="f-g f-r a-c">
				<div class="title-pre"></div>
				<div>杜康动态</div>
			</div>
			<div class="more" @click="routeJump('/pages/qiye-dongtai/qiye-dongtai')"> 更多> </div>
		</div>
		<div class="swiper-list">
			<u-swiper
          effect3d

          :list="swiperList"
				previousMargin="30"
				nextMargin="30"
				indicator
				indicatorMode="line"
				circular
				  showTitle
				radius="5"
				bgColor="#ffffff"
			        ></u-swiper>
		</div>
		<div class="title-box f-r a-c j-b">
			<div class="f-g f-r a-c">
				<div class="title-pre"></div>
				<div>杜康酒</div>
			</div>
			<div class="more" @click="routeJump('/pages/art-list/art-list')"> 更多> </div>
		</div>
		<div class="main-product" @click="routeJump('/pages/art-list/content?id=' + mainProduct.id)">
			<u-image mode="aspectFit" :src="mainProduct.src" width="100%" height="380rpx"></u-image>
			<div class="main-product-box">
				{{ mainProduct.text }}
			</div>
		</div>
		<div class="product-list f-r j-b a-c">
			<div class="product-item f-c" v-for="item in productList" :key="item.id" @click="routeJump('/pages/art-list/content?id=' + item.id)">
				<u-image mode="aspectFill" width="100%" height="250rpx" :src="item.src"></u-image>
				<div class="product-item-content">
					<div class="name">{{ item.text }}</div>
					<div class="desc">{{ item.desc}}</div>
				</div>
			</div>
		</div>
		<div class="title-box f-r a-c j-b">
			<div class="f-g f-r a-c">
				<div class="title-pre"></div>
				<div>杜康文化</div>
			</div>
			<div class="more" @click="routeJump('/pages/art-user-list/art-user-list')"> 更多> </div>
		</div>
		<div class="art-user-list">
			<u-row gutter="10">
				<u-col span="6" v-for="item in artUserList" :key="item.id">
					<div class="art-user-item"  @click="routeJump('/pages/art-user-list/content?id=' + item.id)">
						<u-avatar :src="item.src" style="margin: 30rpx auto; width: 140rpx;height: 140rpx"></u-avatar>
						<div class="username">{{ item.name }}</div>
						<div class="desc">{{ item.desc }}</div>
					</div>
				</u-col>
			</u-row>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [

				],
				mainProduct: {},
				productList: [

				],
				artUserList: [

				]
			}
		},
		onLoad() {
				// 杜康动态
				this.$api.home(0).then(res => {
					this.swiperList = res.result.painters.map(el => {
						return {
							title: el.title,
							image: el.pic,
							type: 'image',
							...el,
						}
					})
				})
				// 杜康酒
				this.$api.home(1).then(res => {
					if (res.result.painters.length) {
						this.mainProduct = {
							src: res.result.painters[0].pic,
							text: res.result.painters[0].title,
							id: res.result.painters[0].id,
						}
					}
					this.productList = res.result.painters.slice(1, 3).map(el => {
						return {
							src: el.pic,
							text: el.title,
							...el,
						}
					})
					if (this.productList.length) return
					this.productList = [
						this.mainProduct,
						this.mainProduct
					]
				})
				// 杜康文化
				this.$api.home(2).then(res => {
					this.artUserList = res.result.painters.slice(0, 3).map(el => {
						return {
							src: el.pic,
							name: el.title,
							...el
						}
					})
				})
		},
		methods: {
			routeJump(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
.home-page {
	background-color: #f3f3f3;
	.swiper-list {
		padding:  0 30rpx;
	}
	.u-swiper__wrapper__item__wrapper__title {
		color: #fff !important;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.art-user-list {
		padding: 0 30rpx 100rpx 30rpx;
		.u-row {
			width: 100%;
		}
		.art-user-item {
			background-color: #fff;
			border-radius: 4px;
			text-align: center;
			padding: 0 20rpx 20rpx 20rpx;
			.username {
				font-size: 32rpx;
				margin-top: 10rpx;
				font-weight: bold;
			}
			.desc {
				font-size: 24rpx;
				margin-top: 16rpx;
				color: #ccc;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: keep-all;
				white-space: nowrap;
			}
		}
	}
	.title-box {
		padding: 30rpx;
		.title-pre {
			display: inline-block;
			width: 3px;
			height: 16px;
			background: #ff443b;
			border-radius: 1px;
			margin-right: 10rpx;
		}
		.more {
			font-size: 28rpx;
			color: #888;
		}
	}
	.video-box {
		padding:0 30rpx;
	}
	.main-product {
		margin: 0 30rpx;
		height: 380rpx;
		position: relative;
		background-color: #fff;
		border-radius: 4px}
	.main-product-box {
		padding: 0 30rpx;
		position: absolute;
		z-index: 2;
		left: 0;
		bottom: 0;
		width: calc(100% - 60rpx);
		height: 80rpx;
		padding: 0 30rpx;
		line-height: 80rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.product-list {
		margin-top: 20rpx;
		padding: 0 30rpx;
		.product-item {
			border-radius: 4px;
			overflow: hidden;
			background-color: #fff;
			width: calc(50% - 20rpx);

			.name {
				padding: 20rpx 20rpx 14rpx 20rpx;
			}
			.desc {
				color: #ccc;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: keep-all;
				white-space: nowrap;
				padding:0 20rpx 20rpx 20rpx;
			}
		}

		.product-item:first-child {
			margin-right: 10rpx;
		}
		.product-item:last-child {
			margin-left: 10rpx;
		}
	}
}
</style>
